<template>
<div>
        项目名称：<input type="text" placeholder="请输入项目名称" v-model="name" />
        项目总金额度：<input type="text" placeholder="请输入项目总金额度" v-model="money1" />-<input type="text" placeholder="请输入项目总金额度" v-model="money2" />
        <button class="btn btn-primary" @click="getData()">查询</button>
        <h1>投资项目列表</h1>
    <table class="table" border="1">
        <thead>
            <tr>
                <th>投资编号</th>
                <th>投资名称</th>
                <th>投资总额度</th>
                <th>已投资额度</th>
                <th>剩余额度</th>
                <th>投资人数</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="item in info" :key="item.I_Id">
                <td>{{item.I_Id}}</td>
                <td>{{item.I_Name}}</td>
                <td>{{item.I_Budget}}</td>
                <td>{{item.I_Receive}}</td>  
                <td>{{item.I_Residue}}</td>
                <td>{{item.I_Number}}</td>
                <td>
                    <button class="btn btn-danger" @click="del(item.I_Id)">删除</button>
                    <button class="btn btn-primary" @click="Upd(item.I_Id)">修改</button>
                </td>
            </tr>
        </tbody>
    </table>
    <span>
        当前共{{page.recordCount}}条数据,
        每页显示{{page.pageSize}}条数据,
        当前第{{page.pageIndex}}页/
        共{{page.pageCount}}页,
        <a href="#" @click="getPage(1)">首页</a>
        <a href="#" @click="getPage(page.pageIndex-1)">上一页</a>
        <a href="#" @click="getPage(page.pageIndex+1)">下一页</a>
        <a href="#" @click="getPage(page.pageCount)">尾页</a>

        <select @change="pagesel()" v-model="sel">
            <option value="1">1条/页</option>
            <option value="2" selected>2条/页</option>
            <option value="3">3条/页</option>
        </select>
        <input type="text"  v-model="tes"  style="width: 50px;"/>
        <button class="btn btn-primary" @click="pagetex()">跳转</button>

    </span>
</div>
</template>
<script setup lang="ts">
import axios from 'axios';
import { ref,onMounted } from 'vue';
import router from '../../../router';

const info:any = ref([])
const name = ref('');
const money1 = ref('');
const money2 = ref('');
const sel = ref(2);
const tes = ref("");

const pagesel=()=>{
    page.value.pageSize= sel.value;
    getData();
}
const pagetex=()=>{
    page.value.pageIndex= Number(tes.value);
    getData();
}

const page = ref({
    pageIndex:1,
    pageSize:2,
    recordCount:1,
    pageCount:1,
})

onMounted(()=>{
    getData();
})

const getData = ()=>{
    axios({
        method:'get',
        url:'http://localhost:57969/api/Invest/ShowInvestInfo',
        params:{
            name:name.value,
            money1:money1.value,
            money2:money2.value,
            pageSize:page.value.pageSize,
            pageIndex:page.value.pageIndex,
            
        }  
    })
    .then(res=>{
        info.value = res.data.list;  
        page.value.recordCount = res.data.recordCount;
        page.value.pageCount = res.data.pageCount;
        console.log(info.value);
    })
    .catch(err=>{
        console.log(err);
    })
    
}

const getPage = (i:number)=>{
    if(i>=1&&i<=page.value.pageCount)
    {
        page.value.pageIndex = i;
        getData();
    }
    else
    {
        alert('页码不正确');
    }
 
    
}

const del = (id:number)=>{
    if(!confirm('是否删除'))
    {
        return;
    }
    axios({
        method:'delete',
        url:'http://localhost:57969/api/Invest/DelInvestinfo',
        params:{
            id:id,
        }
    })
    .then(res=>{
        if(res.data>0)
        {
            alert('删除成功');
            getData();
        }
        else if (res.data==-1)
        {
            alert('投资项目下有投资记录，不能删除');
            return;
        }
        else
        {
            alert('删除失败');
        }
    })
    .catch(err=>{
        console.log(err);
    })
}

const Upd=(id:number)=>{
    
    router.push({
        name:'InvestUpd',
        params:{
            id:id,
        }
    })
}
</script>
